<template>
  <!--  通过ref获取html元素 宽高必须设置 -->
  <div ref="info" class="radar-chart"></div>
</template>

<script setup>
import { getCurrentInstance, onMounted, ref, watch } from 'vue'
import { useMapDataStore } from '@/stores/statistics/mapData.js'
import { storeToRefs } from 'pinia'

const { proxy } = getCurrentInstance()
const info = ref()

const mapDataStore = useMapDataStore()
const { currentLocation, currentAqi } = storeToRefs(mapDataStore)

let userEc // Declare the chart instance outside of onMounted

onMounted(() => {
  const infoEl = info.value
  userEc = proxy.$echarts.init(infoEl, 'light')

  // Initial setup of the chart
  userEc.setOption(getOption())
})

watch([currentAqi, currentLocation], () => {
  userEc.setOption(getOption())
})

function getOption() {
  return {
    title: {
      text: `${currentLocation.value}空气质量情况`,
      left: 'center',
      textStyle: {
        color: '#fff',
        fontSize: 17,
        fontWeight: 'bold'
      }
    },
    tooltip: {},
    radar: {
      indicator: [
        { name: 'AQI', max: 100 },
        { name: 'PM2.5', max: 100 },
        { name: 'PM10', max: 100 },
        { name: 'CO', max: 5 },
        { name: 'NO2', max: 50 },
        { name: 'SO2', max: 50 }
      ]
    },
    series: [
      {
        name: '当地空气质量',
        type: 'radar',
        data: [
          {
            value: currentAqi.value,
            name: currentLocation.value
          }
        ]
      }
    ]
  }
}
</script>

<style scoped lang="scss">
.radar-chart {
  width: 200px;
  height: 200px;
  padding-top: 20px;
  padding-left: 50px;
}
</style>
